<template>
  <div id="system-manage">
    <!-- 系统管理 -->
    <div class="header">
      <!-- 秦山 -->
      <h1 class="header-title">海洋预警报信息服务系统管理</h1>
      <!-- <div style="margin-left: 40px; margin-top: 15px">
        <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
      </div> -->
      <el-dropdown style="
          margin-left: 10px;
          cursor: pointer;
          position: relative;
          float: left;
          line-height: 40px;
          margin-top: 15px;
        ">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        <!-- <span class="el-dropdown-link"> -->
        <!-- <el-icon class="el-icon--right">
            <ArrowDown />
          </el-icon> -->
        <!-- </span> -->
        <template #dropdown>
          <el-dropdown-menu style="width: 100px; color: #fff">
            <el-dropdown-item @click="enterViewSystem">可视化系统</el-dropdown-item>
            <el-dropdown-item @click="loginOut">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="content-container">
      <div class="menu-container">
        <el-menu router default-active="user">
          <!-- <el-sub-menu index="1"> -->
          <!-- <template #title>
              <el-icon>
                <Avatar />
              </el-icon>
              <span>系统管理</span>
            </template> -->
          <el-menu-item index="user">
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>用户管理</span> </el-menu-item><el-menu-item index="mailList">
            <el-icon>
              <Avatar />
            </el-icon>
            <span>通讯录管理</span>
          </el-menu-item>
          <el-menu-item index="role">
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>角色管理</span>
          </el-menu-item>
          <!-- NOTE 预报中心的超级管理员可用 -->
          <el-menu-item index="department">
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>部门管理</span>
          </el-menu-item>
          <!-- <el-menu-item index="warning" v-if="!isYubaoCenter">
            <el-icon>
              <UserFilled />
            </el-icon>
            <span>部门管理</span>
          </el-menu-item> -->
          <!-- <el-menu-item index="warning">
            <el-icon><WarningFilled /></el-icon>
            <span>警戒值管理</span>
          </el-menu-item> -->
          <!-- NOTE 预报中心的超级管理员可用 -->
          <el-menu-item index="tidecsv" v-if="isYubaoCenter">
            <el-icon>
              <Avatar />
            </el-icon>
            <span>月高低潮</span>
          </el-menu-item>
          <!-- NOTE 预报中心的超级管理员可用 -->
          <el-menu-item index="warningdoc" v-if="isYubaoCenter">
            <el-icon>
              <Avatar />
            </el-icon>
            <span>警报单管理</span>
          </el-menu-item>

          <!-- NOTE 预报中心的超级管理员可用 -->
          <el-menu-item index="dataSource" v-if="isYubaoCenter">
            <el-icon>
              <Tools />
            </el-icon>
            <span>数据源配置</span>
          </el-menu-item>
          <!-- </el-sub-menu> -->
        </el-menu>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getUserDepartment } from "../network/net.js";
import { onMounted, ref } from "vue";
import {
  Menu as IconMenu,
  Promotion,
  WarnTriangleFilled,
  Management,
  List,
  HelpFilled,
  WarningFilled,
  Checked,
  Upload,
  UploadFilled,
  Avatar,
  UserFilled,
  Tools,
  Stamp,
  InfoFilled,
} from "@element-plus/icons-vue";
// 引入路由
import { useRouter } from "vue-router";
import { isYubaoCenter } from "../stores/chun.js"
// 路由实例
const router = useRouter();

const enterViewSystem = () => {
  router.push("/web");
};
const loginOut = () => {
  // 清理token
  // sessionStorage.removeItem("token");
  // 从 sessionStorage 删除保存的数据
  sessionStorage.removeItem("token");

  // 从 sessionStorage 删除所有保存的数据
  sessionStorage.clear();
  // 登录页
  router.push("/login");
};
// const isYubaoCenter = ref(false);
const checkLogin = () => {
  let token = sessionStorage.getItem("token");
  if (taken) {
    router.push("/login");
  }
}
onMounted(() => {

  let token = sessionStorage.getItem("token");
  let id = localStorage.getItem("loginId");
  let userinfo = { id: id };
  getUserDepartment(token, userinfo).then((res) => {

    if (res.data.data.department.name == "预报中心") {
      isYubaoCenter.value = true;
    } else {
      isYubaoCenter.value = false;
    }
  });
});
</script>
<style lang="less" scoped>
#system-manage {
  overflow: hidden;

  .header {
    height: 70px;
    width: 100%;
    background: url("../assets/img/sys/titleBak.png");
    // background-color: #fff;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;

    h1 {
      color: #fff;
    }

    .header-title {
      line-height: 65px;
      margin-left: 15px;
      // height: 130px;
      // line-height: 130px;
      font-size: 27px;
      text-align: left;
      letter-spacing: 3px;
      animation: logoAnimation 0.5s ease;
      // animation-delay: .3s;
      //   color: var(--el-text-color-primary);
      font-family: "aliph500";
      margin-bottom: 30px;
      width: 93vw;
      color: #fff;
    }
  }

  .content-container {
    display: flex;
    width: 100%;
    overflow: hidden;
  }

  .content {
    width: 100%;
  }

  .el-menu {
    // height: 91vh;
    height: calc(100vh - 70px);
  }
}
</style>
